<template>
  <div class="wrapper">
    <div class="header">
      <ul>
        <li>
          <img src="@/assets/school/school.jpg" alt />
        </li>
        <li>某某某某lu</li>
      </ul>
    </div>
    <van-tabs v-model="active" title-active-color="#ffa300">
      <van-tab title="找工作" class>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="@/assets/LookingJoB/woker.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/LookingJoB/woker.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/LookingJoB/woker.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/LookingJoB/woker.jpg" alt />
          </van-swipe-item>
        </van-swipe>
        <div class="text-cont">
          <ul>
            <li style="font-weight:900;">图书馆管理员</li>
            <li>2000-5000元/月</li>
          </ul>
          <dl style="list-style:none;">
            <li>性别：不限</li>
            <li>退休状况：不限</li>
            <li>重体力；否</li>
          </dl>
          <span style="margin-top: 12px;">联系电话 ：18304973056241</span>
          <p>招聘一个看门大爷，帮忙守着办公室设备，一周休息三天，早上六点到晚上六点</p>
          <ol>
            <li>保洁</li>
            <li>保安</li>
            <li>小时工</li>
          </ol>
          <p class="kmp">352km</p>
        </div>
        <div class="text-cont">
          <ul>
            <li style="font-weight:900;">图书馆管理员</li>
            <li>2000-5000元/月</li>
          </ul>
          <dl style="list-style:none;">
            <li>性别：不限</li>
            <li>退休状况：不限</li>
            <li>重体力；否</li>
          </dl>
          <span style="margin-top: 12px;">联系电话 ：18304973056241</span>
          <p>招聘一个看门大爷，帮忙守着办公室设备，一周休息三天，早上六点到晚上六点</p>
          <ol>
            <li>保洁</li>
            <li>保安</li>
            <li>小时工</li>
          </ol>
          <p class="kmp">352km</p>
        </div>
        <div class="text-cont">
          <ul>
            <li style="font-weight:900;">图书馆管理员</li>
            <li>2000-5000元/月</li>
          </ul>
          <dl style="list-style:none;">
            <li>性别：不限</li>
            <li>退休状况：不限</li>
            <li>重体力；否</li>
          </dl>
          <span style="margin-top: 12px;">联系电话 ：18304973056241</span>
          <p>招聘一个看门大爷，帮忙守着办公室设备，一周休息三天，早上六点到晚上六点</p>
          <ol>
            <li>保洁</li>
            <li>保安</li>
            <li>小时工</li>
          </ol>
          <p class="kmp">352km</p>
        </div>
      </van-tab>
      <van-tab title="找人才">
        <div class="shuru" style="background:#000;">
          <van-field
            background="#000"
            v-model="value"
            label="单位名称"
            placeholder="请输入单位名称"
            input-align="right"
          />
          <van-field v-model="value" label="企业负责人" placeholder="请输入企业负责人名字" input-align="right" />
          <van-field v-model="value" label="联系电话" placeholder="请输入您的手机号" input-align="right" />
          <van-field v-model="value" label="企业地址" placeholder="请详细输入企业地址" input-align="right" />
        </div>]
        <!-- 上传身份证照片 -->
        <div class="correct-message clearfix">
          <div class="message-title pull-left"></div>
          <div class="left-image-box pull-left">
            <div class="upload-image-box">
              <input
                type="file"
                class="upload-image"
                id="input-image"
                accept="image/jpg, image/png"
              />
              <div class="image-inbox" id="image-left">
                <div class="add-icon-image"></div>
                <div class="add-text">请上传营业执照</div>
              </div>
            </div>
            <img src="#" alt id="left-img" />
            <div class="left-delete-image">+</div>
            <!-- <div class="card-text card-the-right">（身份证正面）</div> -->
          </div>
          <!-- <div class="right-image-box pull-left other-image-box">
          <div class="upload-image-box">
            <input type="file" id="input-image-other" class="upload-image" accept="image/jpg, image/png" />
            <div class="image-inbox" id="image-right">
              <div class="add-icon-image"></div>
              <div class="add-text">上传照片</div>
            </div>
          </div>
          <img src="#" alt="" id="right-img">
          <div class="right-delete-image">+</div>
          <div class="card-text card-the-right">（身份证反面）</div>
          </div>-->
          <div class="dibuOK">
            <ul>
              <li>企业诚信保证押金</li>
              <li>￥ 10000</li>
            </ul>
            <van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
            <button>缴纳押金并完成注册</button>
          </div>
        </div>
      </van-tab>
      <van-tab title="法律维权" class="law-content" type="line">
        <ul>
          <li>
            <img src="@/assets/school/law.jpg" alt />
          </li>
          <li>索苗苗：18211122586</li>
          <li>维权是指维护个人或者群体的合法权益，维权的范围可能包括人身损害，土地纠纷，医疗事故，婚姻，家庭，继承等民事纠纷，所进行的行政以及司法诉讼</li>
        </ul>
        <ul>
          <li>
            <img src="@/assets/school/law.jpg" alt />
          </li>
          <li>索苗苗：18211122586</li>
          <li>维权是指维护个人或者群体的合法权益，维权的范围可能包括人身损害，土地纠纷，医疗事故，婚姻，家庭，继承等民事纠纷，所进行的行政以及司法诉讼</li>
        </ul>
        <ul>
          <li>
            <img src="@/assets/school/law.jpg" alt />
          </li>
          <li>索苗苗：18211122586</li>
          <li>维权是指维护个人或者群体的合法权益，维权的范围可能包括人身损害，土地纠纷，医疗事故，婚姻，家庭，继承等民事纠纷，所进行的行政以及司法诉讼</li>
        </ul>
        <!-- <div class="law-content" style="background:#000;">
        <img src="@/assets/school/law.jpg" alt />
        <p style="font-size:30px; color:red;">索苗苗：18211122586</p>
        <span style="font-size:21px;">维权是指维护个人或者群体的合法权益，维权的范围可能包括人身损害，土地纠纷，医疗事故，婚姻，家庭，继承等民事纠纷，所进行的行政以及司法诉讼</span>
        </div>-->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import City from "../utils/city";
import { Area } from "vant";
import { AddressEdit } from "vant";
export default {
  name: "",
  data() {
    return {
      active: 2,
      areaList: City,
      searchResult: [],
      checked: true
    };
  },
  methods: {
    changeLeftpic() {
      $("#image-left").css({ display: "none" });
      var reads = new FileReader();
      f = document.getElementById("input-image").files[0];
      reads.readAsDataURL(f);
      reads.onload = function(e) {
        document.getElementById("left-img").src = this.result;
        $("#left-img").css({ display: "block" });
        $(".left-delete-image").css({ display: "block" });
        $("#input-image")
          .parent()
          .removeClass("warn");
      };
    },
    onSave() {
      Toast("save");
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区"
          }
        ];
      } else {
        this.searchResult = [];
      }
    }
  },
  props: {},
  components: {},
  mounted() {},
  watch: {}
};
</script>


<style scoped>
/* 底部信息栏部分 */
.dibuOK{
  width: 750px;
  height: 327px;
  background: #000;
  /* border: 1px solid #fff; */
}
.dibuOK ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32px;
}
.dibuOK button{
  width: 750px;
  height: 103px;
  font-size: 32px;
  color: #fff;
  background: #fd0000;
  border: none;
}
.dibuOK ul li{
  margin-top: 30px;
}
.dibuOK ul li:nth-of-type(2){
  color: red;
  border: none;
}
/* 上传身份证照片部分 */
.message-title {
  width: calc(100% - 539px);
  height: auto;
  font-size: 14px;
  font-weight: bold;
  line-height: 46px;
  text-align: right;
}
.left-image-box,
.right-image-box {
  position: relative;
}

.upload-image-box {
  position: relative;
  width: 226px;
  height: 132px;
  margin-bottom: 12px;
  border: 1px dashed #d2d2d2;
  /* //background-color: $gray-input; */

  /* &.warn {
      border-color: $pink;
    } */
}
.upload-image {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 226px;
  height: 132px;
}
.image-inbox {
  padding-top: 36px;
  text-align: center;
}
.add-icon-image {
  height: 34px;
  background-image: url(/src/assets/images/add.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#file {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 5;
}
.add-text {
  padding-top: 22px;
  font-size: 16px;
  /* color: $gray-dark; */
}
.left-delete-image,
.right-delete-image {
  position: absolute;
  display: none;
  top: -12px;
  right: 0;
  font-size: 32px;
  /* color: $gray-base; */
  transform: rotate(45deg);
  cursor: pointer;
}

* {
  color: white;
  background: #000;
}
.van-cell[data-v-039c5b43] {
  height: 46px;
  background: #000;
  border: none;
}
.van-cell .van-field {
  background: #000;
}
/* 找工作 */
.text-cont {
  flex-direction: column;
  width: 690px;
  border-bottom: 1px solid #666666;
  background: #000;
  height: 375px;
  font-size: 32px;
  margin-left: 30px;

  /* padding: 27px; */
  /* border: 1px solid #fff; */
}
.text-cont ul {
  width: 690px;
  height: 50px;
  display: flex;
  margin-top: 15px;
  /* padding: 12px; */
  justify-content: space-between;
  align-items: center;
}
.text-cont ul li:nth-of-type(2) {
  color: red;
}
.text-cont dl {
  margin-top: 15px;
  margin: 0;
  /* padding: 12px; */
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text-cont ol {
  width: 290px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  /* width: 100px; */
  /* float: left; */
}
.text-cont p {
  padding: 0;
  margin: 0;
  margin-top: 12px;
}
.text-cont .kmp {
  /* display:block; */
  /* float: left; */
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.van-swipe-item > img {
  width: 400px;
  height: 200px;
}
.van-cell .van-field {
  height: 110px;
}
.van-cell {
  height: 110px;
}
.van-tabs--line {
  /* background: #000; */
}
.van-tabs--line .van-tabs__wrap {
  height: 200px;
}
/* .van-tabs--line{
  background: #000;
} */
.van-tabs >>> .van-tabs__nav--line {
  padding-bottom: 20px;
  background: #000;
  border: none;
}
.header {
  height: 100px;
  background: #000;
}
.header ul {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header ul li {
  color: #fff;
  font-size: 35px;
  margin-right: 250px;
}
.header ul li > img {
  width: 52px;
  height: 62px;
}
/* 法律维权部分 */
.law-content {
  width: 100%;
  /* border: 1px solid #fff; */
  background: #000;
  padding: 13px;
}
.law-content ul {
  width: 690px;
  height: 575px;
  border-bottom: 1px solid #666666;
  margin-bottom: 38px;
}
.law-content ul li > img {
  width: 690px;
  height: 350px;
  margin-left: 17px;
}
.law-content ul li:nth-of-type(2) {
  font-size: 35px;
  margin-left: 17px;
}
.law-content ul li:nth-of-type(3) {
  font-size: 28px;
  margin-top: 13px;
  margin-left: 17px;
}
</style>